<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body{
      height:2000px
    }
  </style>
</head>
<body>
<div>
  <button>主线程任务</button>
  <button>workers任务</button>
  <button>假死现象</button>
</div>
</body>
<script>
  // // 测试浏览器是否支持WORKER
  // if(typeof Worker === "undefined"){
  //     console.log("不支持");
  // }else{
  //     console.log("支持");
  // }
  var btns = document.querySelectorAll("button");
  btns[0].onclick = function () {
    var num = 0;
    for(var i=0;i<100000000;i++){
      num+= Math.random();
    }
    console.log("任务完成：" ,num);
  }
  btns[1].onclick = function () {
    if(typeof Worker === "undefined"){
      console.log("不支持");
    }else{
      // worker需要接收一个文件地址. 生成实例后会执行my.js
      var worker = new Worker("my.js");
      worker.postMessage(10000000);
      // 接收my.js传递过来的数据
      worker.onmessage = function (e) {
        console.log("主线程接收到的信息" ,e.data);
        worker.terminate();// 通过主线程将worker分线程关闭掉。
      }
    }

  }
  btns[2].onclick = function () {
    console.log("假死现象")
  }
</script>
</html>